<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import querySmsRecordList from '@/api/message-management/message';

  const columns = [
    {
      title: '短信ID',
      dataIndex: 'id',
    },
    {
      title: '短信标题',
      dataIndex: 'smsTitle',
    },
    {
      title: '手机号',
      dataIndex: 'phoneMask',
    },
    {
      title: '发送结果',
      dataIndex: 'sendStatusLabel',
    },
    {
      title: '发送时间',
      dataIndex: 'sendTime',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        mesTitle: '',
        mesTel: '',
        mesResult: '',
        time: [],
      },
    },
    table: {
      apiFun: (params: any) => {
        const { time = [], ...ot } = params;
        return querySmsRecordList({
          ...ot,
          startTime: time[0],
          endTime: time[1],
        });
      },
      columns,
    },
  });

  const expandable = {
    title: '',
    width: 80,
    expandedRowRender: (record: any) => {
      return record.smsContent;
    },
  };
</script>

<template>
  <TableLayout v-bind="page.bindProps" :create="false" :expandable="expandable">
    <template #searchForm="{ state }">
      <a-form-item field="mesTitle" label="短信标题" label-col-flex="60px">
        <a-input
          v-model="state.mesTitle"
          placeholder="请输入短信标题"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="mesTel" label="手机号" label-col-flex="60px">
        <a-input
          v-model="state.mesTel"
          placeholder="请输入手机号"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="mesResult" label="发送结果" label-col-flex="60px">
        <dict-select
          v-model="state.mesResult"
          type="SmsLogStatus"
          placeholder="请选择发送结果"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="time" label="发送时间" label-col-flex="60px">
        <a-range-picker
          v-model="state.time"
          value-format="YYYY-MM-DD"
          allow-clear
        />
      </a-form-item>
    </template>
  </TableLayout>
</template>

<style lang="less" scoped></style>
